<script>
    // 协作者模态表单页
    Vue.component('bind-accounts', {
        template: `
<el-dialog :visible.sync="dialogShow" width="600px" @close="closeModal">
    <h3 slot="title">账户配置</h3>
    <el-form ref="form"  label-width="80px">
                <el-form-item label="账户权限">
                                    <el-select v-model="account_ids"  placeholder="账户" clearable filterable multiple
                                                        default-first-option
                                                        ref="projectTpl"
                                                        >
                                                <el-option
                                                        v-for="item in accountList"
                                                        :key="item.id"
                                                        :label="item.title"
                                                        :value="item.id">
                                                </el-option>
                                            </el-select>

        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="handleBindUserForm">确 定</el-button>
    </div>
</el-dialog>
    `,
        props: ['dialog-show','form-row'],
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            },
            accountList() {
                return this.$store.state.accountList
            },
        },
        watch: {
            dialogShow:{
                handler (newVal) {},
                deep:true,
                immediate: true
            },
            formRow: {
                handler (newVal) {

                    this.uid = newVal.uid;
                    this.account_ids = [];
                    if(newVal.account_ids != null && newVal.account_ids !== ''){
                        this.account_ids = newVal.account_ids.split(',');
                    }
                },
                deep:true
            }
        },
        data:function() {
            return {
                account_ids:[],
                uid:0
            }
        },
        methods: {
            closeModal() {
                this.$emit('modalClose')
            },
            handleBindUserForm(){
                let that = this
                if(this.uid == 0){
                    that.$message({
                        type: 'error_dont_has_user',
                        message: res.data.error_message
                    })
                    return;
                }
                let postUrl = '/api/tally/set-accounts'
                axios.post(postUrl,{
                    id:that.currentTallyId,
                    account_ids:that.account_ids.join(','),
                    uid:that.uid
                },{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.$message({
                            type: 'success',
                            message: '操作成功~'
                        })
                        that.$emit('getTallyUsersList')
                        that.$emit('modalClose')
                    }else{
                        that.$message({
                            type: 'error',
                            message: res.data.error_message
                        })
                    }
                })
            },
        }
    })
</script>
